<template>
<div>
	<div class="header">
		<p>商家拒绝退款</p>
	</div>
	<div class="Con">
		<div class="PersonInfo">
			<div class="TouXiangBox">
				<img src="https://pic3.zhimg.com/v2-a533e2da3627c891d7e366688cc4495a_r.jpg" alt="" class="img" />
			</div>
			<div>
				<div>
						<span>The Girl -单人</span>
				</div>
					<div>
						<span>单人照</span>
					</div>
			</div>
			<div>
				<div>
					<span>￥<span>399</span></span>
				</div>
			</div>
		</div>
		<div class="yuyuetime">
			<p>预约时间:2023-10-5 16:18</p>
		</div>
		<div class="youhuijuan">
			<div>
				<span>优惠卷</span>
				</div>
				<div>
					<span>暂无优惠券</span>
				</div>
		</div>
		<!-- 小计 -->
		<div class="Xiaoji">
			<div>
				<span>小计:</span>
			</div>
			<div>
				<span>￥</span><span>399</span>
			</div>
		</div>
		<!-- 订单详细信息 -->
		<div class="OrderDetailInfo">
			<div class="OrderInfo">
				<p>订单信息</p>
			</div>
			<div class="AddressInfo">
				<div class="AddressInfoBox">
					<div>
						收获信息
					</div>
					<div class="addressin">
						<div>
							<span>落辰</span>
						</div>
						<div>
							<span>2023-8-10</span>
						</div>
						<div>
							<span>女</span>
						</div>
					</div>
				</div>
			</div>
			<div class="OrderBianHao">
				<div>
					<span>订单编号</span>
				</div>
				<div>
					<span>110133906950283689</span>
				</div>
				<div>
					<button class="copyBtn">复制</button>
				</div>
				
			</div>
			<div class="createTime">
				<div class="createTimeBox">
					<span>创建时间</span>
				</div>
				<div>
					<span>2023-8-24 0:56</span>
				</div>
			</div>
			<div class="PayNowBox">
			<div >
				<span>支付方法</span>
			</div>
			<div>
				微信支付
			</div>
				
			</div>
		</div>
		<!-- 驳回原因 -->
		<div class="BoHui">
			<div>
				<span>驳回原因</span>
			</div>
			<div>
				<span>用户不配合拍照</span>
			</div>
		</div>
		<!--描述 -->
		<div class="desc">
			<ul>
				<li>
					预约成功后可修改六次时间。
				</li>
				<li>
					拍摄高峰可能稍需等待，如您无法按时到店，烦请提前与门店联系，我们会尽力协调，门店繁忙时
					可能无法安排拍摄或需改期。
				</li>
				<li>
					若拍摄前24小时内申请退款需收取订单金额的15
					%作为手续费。
				</li>
				<li>
					多个产品下单，若非同一人拍摄，须到店补差价。
				</li>
				<li>
					为保障您的资金安全与自身权益，请杜绝与个人
					收款账号及手交易平台进行交易。
				</li>
			</ul>
		</div>
		<div class="checkSuccessCon">
		  <!-- 申请退款 和联系商家的按钮-->
		  <div class="checkSuccessConBtn">
			  <div>
				     <button class="btn" type="default" plain="true">联系门店</button>
			  </div>
			  <div>
				   <button class="btn" type="default" plain="true">追加评论</button>
			  </div>
		 
			
		  </div>
		</div>
	
	</div>
	
	
</div>
</template>

<script>
</script>

<style scoped>
	.header{
		width: 100%;
		height: 150px;
		background-color: #e03e36;
		padding-top: 10px;
		padding-left: 10px;
		color: white;
	}
	.img{
		width: 50px;
		height: 50px;
	}
	.PersonInfo{
		width: 345px;
		height: 100px;
		background-color: white;
		position: absolute;
		top: 45px;
		left: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 10px;
	}
	.yuyuetime{
		width: 355px;
		height: 45px;
			background-color: white;
			position: absolute;
			top: 145px;
			left: 10px;
			padding-left: 10px;
			border-bottom: 1px solid black;
	}
	.youhuijuan{
	width: 355px;
	height: 45px;
		background-color: white;
		position: absolute;
		top: 200px;
		left: 10px;
		padding-left: 10px;
		border-bottom: 1px solid black;
		display:flex;
		justify-content: space-between;
		align-items: center;
	}
	.Xiaoji{
		width: 355px;
		height: 20px;
		line-height: 20px;
			background-color: white;
			position: absolute;
			top: 250px;
			left: 10px;
			padding-left: 10px;
		
			padding: 10px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
	}
	.OrderDetailInfo{
					/* border: 1px solid black; */
					margin-top: 100px;
		
	}
	.OrderInfo{
		/* border: 1px solid black; */
		/* padding: 10px; */
		width: 350px;
				/* border: 1px solid black; */
					background-color: #ffffff;
				padding: 10px;
				font-size: 15px;
				margin-top: 10px;
				padding-left:20px ;
	}
	.AddressInfo .AddressInfoBox{
						/* border: 1px solid black; */
						width: 350px;
								/* border: 1px solid black; */
									background-color: #ffffff;
								padding: 10px;
								font-size: 15px;
								margin-top: 10px;
								padding-left:20px ;
								display: flex;
								justify-content: space-between;
								align-items: center;
		
		
	
	}
	.addressin{
		display: flex;
		justify-content: space-around;
		align-items: center;
	
		width: 150px;
	}
	.OrderBianHao{
		display: flex;
		justify-content: space-around;
		align-items: center;
	
			padding-left: 12px;
			padding: 5px;
		
	}
	.copyBtn{
	
		font-size: 13px;
		background-color: lightblue;
		color: white;
	}
	.createTime{
					/* border: 1px solid black; */
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-left: -40px;
					padding:5px;
					
			
					
					
		
	}
	.createTimeBox{
	
		padding: 5px;
		margin-left: -45px;
	}
	.PayNowBox{
		display: flex;
		justify-content: space-around;
		align-items: center;
				margin-left: -60px;
	
			padding: 5px;
	}
	.desc{
		/* border: 1px solid red; */
		height: 200px;
		line-height:20px;
		margin-top: 10px;
		padding: 10px;
	}
	.checkSuccessConBtn{
		display:flex;
		justify-content: flex-end;
		align-items: center;
	}
	.btn{
		font-size: 12px;
		width: 100px;
		margin-right: 20px;
	}
	.Determine-whether-to-apply-for-a-refund{
	
		text-align: center;
		padding-top: 10px;
		padding-bottom:10px ;
	}
	.refundInfo{
			/* border: 1px solid black; */
			text-align: center;
			padding: 15px;
	}
	.TuiKuanBox{
		/* border: 1px solid red; */
		display: flex;
		justify-content: space-around;
		align-items: center;
		
		
	}
	.TuiBtn{
	
		width: 100px;
		height: 35px;
		font-size: 12px;
		color: white
	}
	.TuiKuanBtn{
		background-color: aqua;
	}
	.BuTuiLe{
		display: inline-block;
	background-color: coral;	
	}
	.ReasonforrefundBox{
		border: 1px solid red;
		padding: 5px;
		
	}
	.TuiKuanLiyou{
		/* border: 1px solid black; */
		text-align: center;
		padding-top: 10px;
		
		
	}
	.TuiKuandesc{
		/* border: 1px solid black; */
		margin-top: 12px;
	}
	.TuiKuanYuanYin{
		
	}
	.Tui{
		background-color: orange;
	}
	.BoHui{
		
		width: 345px;
		height: 100px;
				color: red;
				line-height: 45px;
				padding-left: 20px;
				border: 1px solid gray;
				text-align: left;
	}
</style>